<template>
  <div class="flex1 colorF dataSeaLeft_box flexC positionR">
    <img src="@/assets/img/dataSea/icon_fxyp.png" alt=""
         @click="fxypClick('殡葬数据分析研判')"
         class="fxyp_img"/>
     <div class="top_box flexC colorF flex1 bk">
       <div class="title flex"><i class="title_line"></i><span class="title_txt">当前客流数据</span>
       </div>
       <div class="flex flex1 JustifyContentC AlignItemsC">
         <div style="text-align: right">
           <p class="font_s40 blue font_Impact">{{videoAllComeNum}}</p>
           <p class="font_s16">入园人数</p>
         </div>
         <img src="../../assets/img/dataSea/6.png" alt="" class="JustifyContentC AlignItemsC" style="margin-right: .5rem;height: 5.125rem"/>
         <div class=" JustifyContentC AlignItemsC" style="position: relative">
           <span class="mh">:</span><img src="../../assets/img/dataSea/7.png" alt="" style="margin: 0 0 0 1rem;height: 5.125rem"/>
         </div>
         <div class="JustifyContentC AlignItemsC">
           <p class="font_s40 orange font_Impact">{{videoAllInNum}}</p>
           <p class="font_s16">在园人数</p>
         </div>
       </div>
    </div>
    <div class="bottom_box flexC flex3 bk2">
      <div style="padding: 2rem 1.5rem 0 2rem;">
        <p class="font_s18 flex ">
        <span
          class="flex1 title_txt"
          :class="{graveSelect: graveSelect2===1}"
          @click="graveSelectClick(1)">
          土地信息
        </span>
          <span
            class="flex1 title_txt"
            :class="{graveSelect: graveSelect2===2}"
            @click="graveSelectClick(2)">
          墓穴信息
        </span>
          <span
            class="flex1 title_txt"
            :class="{graveSelect: graveSelect2===3}"
            @click="graveSelectClick(3)">
          人员信息
        </span>
          <span
                  class="title_txt"
            style="flex: 1.3"
            :class="{graveSelect: graveSelect2===4}"
            @click="graveSelectClick(4)">
          节地补贴信息
        </span>
        </p>
        <i class="line"></i>
        <div v-if="graveSelect2===1" class="flexC" >
          <ul class="graveBox">
            <li class="graveItem JustifyContentC AlignItemsC"
                v-for="(item, index) in echartsList1"
                :key="index">
              <p class="font_s18 blue2">
                <span class="font_s28 font_Impact">{{ item.value }}</span>亩
              </p>
              <p class="font_s16 colorF text_bottom">{{ item.name }}</p>
            </li>
          </ul>
        </div>
        <div v-if="graveSelect2===2" class="flexC" >
          <ul class="graveBox">
            <li class="graveItem JustifyContentC AlignItemsC"
                v-for="(item, index) in echartsList2"
                :key="index">
              <p class="font_s18 blue2">
                <span class="font_s28 font_Impact">{{ item.value }}</span>穴
              </p>
              <p class="font_s16 colorF text_bottom">{{ item.name }}</p>
            </li>
          </ul>
        </div>
        <div v-if="graveSelect2===3" class="flexC" >
          <ul class="graveBox">
            <li class="graveItem JustifyContentC AlignItemsC"
                v-for="(item, index) in echartsList3"
                :key="index">
              <p class="font_s18 blue2">
                <span class="font_s28 font_Impact">{{ item.value }}</span>人
              </p>
              <p class="font_s16 colorF text_bottom">{{ item.name }}</p>
            </li>
          </ul>
        </div>
        <div v-if="graveSelect2===4" class="flexC" >
          <ul class="graveBox">
            <li class="graveItem JustifyContentC AlignItemsC"
                v-for="(item, index) in echartsList4"
                :key="index">
              <p class="font_s18 blue2">
                <span class="font_s28 font_Impact">{{ item.value }}</span>
              </p>
              <p class="font_s16 colorF text_bottom">{{ item.name }}</p>
            </li>
          </ul>
        </div>
      </div>
      <div class="echartsBox JustifyContentC AlignItemsC">
        <p class="font_s24 colorF txtStyle font_Impact" style="color: #00B3FF;" :style="{'display': (type === 4 ? 'none' : 'inline-block')}">{{ total }}<span class="font_s18">{{ dw }}</span></p>
        <div class="echarts" id="echarts1"
             :style="[{marginTop:(type === 4 ? '2rem' : '0')}]"></div>
        <p style="color: #00B3FF;position: absolute;bottom: 0rem;left: 35%;"
           :style="{'display': (type === 2 ? 'inline-block' : 'none')}"
           class="font_s18 cursor"
            @click="funClick">各葬式墓穴信息表</p>
      </div>
    </div>
    <modal-list
      v-if="MXDetails"
      @hidden="hiddenPolygon(MXDetails)"
      :title="modeName">
      <h-l-y-modal
        :data-list="dataList" />
    </modal-list>
    <modal-new-polygon v-if="fxypModal"
                       @hidden="hiddenPolygon(fxypModal)"
                       :title=modeName>
       <analysis-and-judgement />
    </modal-new-polygon>
  </div>
</template>

<script>
import ModalList from '../../components/ModalList'
import HLYModal from "./modal/HLYModal";
import { queryPeopleNum } from '@/api/home'
import { queryDataSeaOrgNum } from '@/api/dataSea'
import ModalNewPolygon from "../../components/ModalNewPolygon";
import AnalysisAndJudgement from "./fxyp/AnalysisAndJudgement";
export default {
  name: 'DataSeaLeft',
  components: {AnalysisAndJudgement, ModalNewPolygon, HLYModal, ModalList },
  data () {
    return {
      videoInfoNew: 0,
      videoAllComeNum: 0,
      videoAllInNum: 0,
      MXDetails: false,
      fxypModal: false,
      graveSelect: 1,
      graveSelect2: 1,
      type: 1,
      arrX: ['5A级', '4A级', '3A级', '2A级', '1A级'],
      arrY: [41, 69, 174, 54, 33],
      total: '',
      dw: '',
      title: '',
      modeName: '',
      echartsList1: [],
      echartsList2: [],
      echartsList3: [],
      echartsList4: [],
      dataList: [
        { name: '传统非节地入土墓', yjzs: '602875穴', yxss: '584410穴', ylzs: '455100穴', wxss: '18465穴', jgqj: '12800-550000元/套' },
        { name: '壁葬', yjzs: '150137格', yxss: '83658格', ylzs: '64940格', wxss: '66479格', jgqj: '60-73800元/套' },
        { name: '寄存格位', yjzs: '101407格', yxss: '46792格', ylzs: '46792格', wxss: '54615格', jgqj: '0-200元/套' },
        { name: '其他节地葬式\n(植树、草坪、花坛、生态深埋)', yjzs: '60869穴', yxss: '55292穴', ylzs: '52731穴', wxss: '5577穴', jgqj: '0-103800元/套' },
        { name: '合计', yjzs: '915288穴（格）', yxss: '770152穴（格）', ylzs: '619563穴（格）', wxss: '145136穴（格）', jgqj: '0-550000元/套' }
      ]
    }
  },
  mounted () {
    this.$nextTick(() => this.getData())
    let myChart = document.getElementById('echarts1')
    if (!myChart) {
      return false
    }
    this.queryDataSeaOrgNum()
  },
  methods: {
    fxypClick (name) {
      this.modeName = name
      this.fxypModal = true
     /* this.$router.push({
        name: 'AnalysisAndJudgement',
        /!*params: {
          title: '殡葬数据分析研判'
        }*!/
      })*/
    },
    hiddenPolygon (choose) {
      if (this.MXDetails === choose) {
        this.MXDetails = false
      }
      if (this.fxypModal === choose) {
        this.fxypModal = false
      }
    },
    async queryDataSeaOrgNum () {
      queryDataSeaOrgNum().then((response) => {
        if (response.data) {
          this.echartsList1 = response.data.response.landInfo
          if (this.echartsList1) {
            this.title = this.echartsList1[0].name
            this.dw = '亩'
            this.total = this.echartsList1[0].value
          }
          this.echartsList2 = response.data.response.graveInfo
          this.echartsList3 = response.data.response.practitionerInfo
          this.echartsList4 = response.data.response.savelandInfo
          this.receptionFun(this.echartsList1, this.title)
        }
      }).catch((response) => {
        console.log(response)
      })
    },
    async getData () {
      const params = { page: 1, pageSize: 1 }
      queryPeopleNum(params).then((response) => {
        if (response.data) {
          this.videoAllComeNum = response.data.response.allComeAreaNum
          this.videoAllInNum = response.data.response.allInAreaNum
        }
      }).catch((response) => {
        console.log(response)
      })
    },
    funClick () {
      this.MXDetails = true
      this.modeName = '墓穴信息'
    },
    hidden5 () {
      this.MXDetails = false
    },
    graveSelectClick (type) {
      this.graveSelect2 = type
      this.type = type
      if (type === 1) {
        this.total = this.echartsList1[0].value
        this.dw = '亩'
        this.title = this.echartsList1[0].name
        this.receptionFun(this.echartsList1, this.title)
      } else if (type === 2) {
        this.total = this.echartsList2[0].value
        this.dw = '穴'
        this.title = this.echartsList2[0].value
        this.receptionFun(this.echartsList2, this.title)
      } else if (type === 3) {
        this.total = this.echartsList3[0].value
        this.dw = '人'
        this.title = this.echartsList3[0].value
        this.receptionFun(this.echartsList3, this.title)
      } else if (type === 4) {
        if (this.echartsList4) {
          this.title = this.echartsList4[0].value
        }
        this.receptionFun(this.echartsList4, this.title)
      }
    },
    receptionFun (dataList, titleName) {
      let echarts = this.$echarts.init(document.getElementById('echarts1'))
      echarts.clear()
      window.addEventListener('resize', () => {
        echarts.resize()
      })
      let option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        grid: {
          top: '16%',
          left: '5%',
          right: '5%',
          bottom: '5%',
          containLabel: true
        },
        color: ['#0b4ce1', '#35a36c', '#0e6fe7', '#b3b539', '#b8872b'],
        series: [{
          name: titleName,
          type: 'pie',
          center: ['50%', '50%'],
          radius: ['50%', '65%'],
          label: {
            formatter: '{b|{b}}{abg|}\n{hr|}\n {c}',
            backgroundColor: '#00000000',
            fontSize: 12,
            rich: {
              /* a: {
                color: '#00B3FF',
                lineHeight: 22,
                align: 'center'
              }, */
              a: {
                align: 'center',
                fontSize: 12,
                height: 22
              },
              hr: {
                borderColor: '#95BFFF',
                width: '100%',
                borderWidth: 0.5,
                marginTop: 5,
                height: 0
              },
              b: {
                fontSize: 12,
                height: 20
              },
              c: {
                fontSize: 12,
                height: 30
              }
              /*  per: {
                color: '#00B3FF'
              } */
            }
          },
          data: dataList
        }]
      }
      echarts.setOption(option)
    }
  }
}
</script>

<style scoped lang="scss">
  .fxyp_img {
    width: 8.75rem;
    height: 5.875rem;
    position: absolute;
    left: -1rem;
    bottom: 4%;
    z-index: 2;
  }
  .bk {
    background: url("~@/assets/img/zhjg/small_gray_bg.png") no-repeat;
    background-size: 100% 100%;
    padding: .6rem .5rem .5rem .5rem;
    box-sizing: border-box;
  }
  .bk2 {
    background: url("../../assets/img/zhjg/gray_bg.png") no-repeat;
    background-size: 100% 100%;
    padding: .6rem .5rem .5rem .5rem;
    box-sizing: border-box;
  }
  .title {
    height: 2.8125rem;
    line-height: 2.8125rem;
    padding-left: 1rem;
    position: relative;
    background: url("../../assets/img/zhjg/ic_baioqian.png") no-repeat;
    background-size: 100% 100%;
    font-family: PingFang SC;
    .title_line {
      width: 3px;
      height: 1.125rem;
      margin-top: .84375rem;
      margin-right: .6rem;
      background: linear-gradient(0deg, #87CCED, #D8FBFE);
    }
  }
  .title_txt{
    font-weight: bold;
    color: #97E2F4;
    background: linear-gradient(0deg, #87CCED 0%, #D8FBFE 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .txtStyle {
    position: absolute;
    height: 2rem;
    width: 98%;
    text-align: center;
    line-height: 2rem;
    top: 40%;
    z-index: 1;
  }
  .echartsBox {
    width: 100%;
    height: 100%;
    position: relative;
  }
  .echarts{
    width: 98%;
    height: 23vh;
    margin:auto;
  }
  .dataSeaLeft_box {
    position: relative;
    box-sizing: border-box;
/*    .title {
      line-height: 2.1875rem;
      text-align: left;
      padding-left: 2rem;
      .title_img {
        width: 1.4375rem;
        margin: 0 .2rem 0 1rem;
        height: 1.75rem;
        position: absolute;
        top: 1.2rem;
        left: .5rem
      }
    }*/
    .mh {
      display: inline-block;
      top: 39%;
      font-weight: bold;
      position: absolute;
    }
    .blue2 {
      color: #00DEFF;
    }
    .blue {
      color: #23B3FF;
    }
    .orange {
      color: #F3C90F;
    }
    .top_box {
     height: 24%;
      position: relative;
    }
    .graveSelect {
      color: #FFFFFF;
      -webkit-text-fill-color: #FFFFFF;
    }
    .bottom_box {
      width: 100%;
      height: 76%;
      position: relative;
      margin-top: .5rem;
      box-sizing: border-box;
      .line {
        width: 90%;
        height: 2px;
        display: inline-block;
        margin: 1rem auto;
        background: #00B3FF;
      }
      .graveBox {
        display: flex;
        flex-wrap: wrap;
        position: relative;
        .graveItem {
          background: url("../../assets/img/dataSea/1.png") no-repeat;
          background-size: 100% 100%;
          width: 30%;
          height: 7.0625rem;
          margin-right: 3.1%;
          margin-bottom: 1rem;
          float: left;
          text-align: center;
          display: grid;
        }
        .text_bottom {
        }
      }
      .graveBox li:nth-child(3) {
        margin-right: 0;
      }
    }
  }
</style>
